// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store({
    // 严格模式，有利于初学者检测不规范的代码
    strict: true,
    // 通过state可以提供数据（所有组件共享的数据）
    state: {
        title: '大标题',
        count: 100,
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    // 2.通过mutations可以提供修改数据的方法
    mutations: {
        // 所有mutation函数，第一个参数，都是state
        addCount(state, n) {
            // 修改数据
            state.count += n
        },
        setCount(state, newCount) {
            state.count = newCount
        },
        changeTitle(state, newTitle) {
            state.title = newTitle
        },
        subCount(state, n) {
            state.count -= n
        }
    },
    // 3。actions处理异步
    // 注意：不能直接操作 state，操作 state，还是需要commit mutation
    actions: {
        // context上下文（此处未分模块，可以当成store仓库）
        // context.commit（mutation名字'，额外参数）
        changeCountAction(context, num) {
            setTimeout(() => {
                // 这里是setTimeout模拟异步，以后大部分场景是发请求
                context.commit('addCount', num)
            }, 1000)
        }
    },
    // 4.getters类似于计算属性
    getters: {
        // 注意点:
        // 1.形参第一个参数,就是state
        // 2.必须有返回值，返回值就是getters的值
        filterList(state) {
            return state.list.filter(item => item > 5)
        }
    }
})

// 导出仓库
export default store
